<template>
  <div class="overviewPage">
    <div class="small-panel-box">
      <el-row :gutter="20">
        <el-col :sm="12" :lg="8">
          <div class="small-panel user-reg suspension">
            <div class="small-panel-title">累计告警</div>
            <div class="small-panel-content">
              <div class="content-left">
                <Icon color="#0071b7" size="20" name="fa fa-line-chart" />
                <span id="warning_sum">{{ state.topHeader.sum }}</span>
              </div>
              <!-- <div class="content-right">+14%</div> -->
            </div>
          </div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="small-panel user-reg suspension">
            <div class="small-panel-title">已处理告警</div>
            <div class="small-panel-content">
              <div class="content-left">
                <Icon color="#00b768" size="20" name="fa fa-line-chart" />
                <span id="warning_processed">
                  {{ state.topHeader.processed }}
                </span>
              </div>
              <!-- <div class="content-right">+14%</div> -->
            </div>
          </div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="small-panel user-reg suspension">
            <div class="small-panel-title">未处理告警</div>
            <div class="small-panel-content">
              <div class="content-left">
                <Icon color="#ff4b23" size="20" name="fa fa-line-chart" />
                <span id="warning_unprocessed">
                  {{ state.topHeader.unprocessed }}
                </span>
              </div>
              <!-- <div class="content-right">+14%</div> -->
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, markRaw, nextTick } from "vue";
import { useWarningList } from "@/store/backend/Warning/list";
import { CountUp } from "countup.js";

const list = useWarningList();

const state: {
  topHeader: any;
} = reactive({
  topHeader: {
    processed: null, //已处理告警
    sum: null, //累计告警
    unprocessed: null, //未处理告警
  },
});

//获取告警大盘头部数据
const getWarningMarketData = () => {
  list
    .getWarningMarket({})
    .then((res: any) => {
      state.topHeader.sum = res.data.sum; //累计告警
      state.topHeader.processed = res.data.processed; //已处理告警
      state.topHeader.unprocessed = res.data.unprocessed; //未处理告警
    })
    .catch((err: any) => {});
};

const countUpFun = (id: string) => {
  nextTick(() => {
    let value = document.getElementById(id)?.innerText;
    if (value) {
      new CountUp(id, parseInt(value), {
        startVal: 0,
        duration: 3,
      }).start();
    }
  });
};

const initCountUp = () => {
  countUpFun("warning_sum");
  countUpFun("warning_processed");
  countUpFun("warning_unprocessed");
};

onMounted(() => {
  //获取告警大盘头部数据
  getWarningMarketData();
  //数字滚动
  initCountUp();
});
</script>
<style lang="scss" scoped>
.overviewPage {
  margin-left: 20px;
  .small-panel-box {
    margin-top: 20px;
  }
  .welcome {
    transition: all 0.3s ease;
    background: #e1eaf9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 15px 20px !important;
    box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
    height: 100%;
    .welcome-img {
      height: 100px;
      margin-right: 10px;
      user-select: none;
    }
    .welcome-title {
      font-size: 1.5rem;
      line-height: 30px;
      color: var(--ba-color-primary-light);
    }
    .welcome-note {
      padding-top: 6px;
      font-size: 15px;
      color: var(--el-text-color-primary);
    }
  }
  .small-panel {
    background-color: #e9edf2;
    border-radius: var(--el-border-radius-base);
    transition: all 0.3s ease;
    padding: 25px;
    margin-bottom: 20px;
    .small-panel-title {
      color: #92969a;
      font-size: 15px;
    }
    .small-panel-content {
      display: flex;
      align-items: flex-end;
      margin-top: 20px;
      color: #2c3f5d;
      .content-left {
        font-size: 24px;
        .icon {
          margin-right: 10px;
        }
        span {
          display: inline-block;
          font-size: 28px;
        }
      }
      .content-right {
        font-size: 18px;
        margin-left: auto;
      }
      .color-success {
        color: var(--el-color-success);
      }
      .color-warning {
        color: var(--el-color-warning);
      }
      .color-danger {
        color: var(--el-color-danger);
      }
      .color-info {
        color: var(--el-text-color-secondary);
      }
    }
  }
  .suspension:hover {
    -webkit-transform: translateY(-4px) scale(1.02);
    -moz-transform: translateY(-4px) scale(1.02);
    -ms-transform: translateY(-4px) scale(1.02);
    -o-transform: translateY(-4px) scale(1.02);
    transform: translateY(-4px) scale(1.02);
    -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
    z-index: 999;
    border-radius: 6px;
  }
}
html.dark {
  .welcome {
    background-color: var(--ba-bg-color-overlay);
  }
  .small-panel {
    background-color: var(--ba-bg-color-overlay);
    .small-panel-content {
      color: var(--el-text-color-regular);
    }
  }
  .new-user-item {
    .new-user-base {
      color: var(--el-text-color-regular);
    }
  }
}
</style>
